<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>学车在线首页</title>
	<link rel="stylesheet" href="./css/style.css">
</head>

<body>
	<!-- box核心内容区域开始 -->
	<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<div class="box-bd">
			<ul class="clearfix">
				<li>
					<a href="#">
						<img src="./images/course01.png" alt="">
						<h4>
							Think PHP 5.0 博客系统实战项目演练
						</h4>
						<div class="info">
							<span>高级</span> • <span>1125</span>人在学习
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./images/course01.png" alt="">
						<h4>
							Think PHP 5.0 博客系统实战项目演练
						</h4>
						<div class="info">
							<span>高级</span> • <span>1125</span>人在学习
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./images/course01.png" alt="">
						<h4>
							Think PHP 5.0 博客系统实战项目演练
						</h4>
						<div class="info">
							<span>高级</span> • <span>1125</span>人在学习
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./images/course01.png" alt="">
						<h4>
							Think PHP 5.0 博客系统实战项目演练
						</h4>
						<div class="info">
							<span>高级</span> • <span>1125</span>人在学习
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./images/course01.png" alt="">
						<h4>
							Think PHP 5.0 博客系统实战项目演练
						</h4>
						<div class="info">
							<span>高级</span> • <span>1125</span>人在学习
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./images/course01.png" alt="">
						<h4>
							Think PHP 5.0 博客系统实战项目演练
						</h4>
						<div class="info">
							<span>高级</span> • <span>1125</span>人在学习
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./images/course01.png" alt="">
						<h4>
							Think PHP 5.0 博客系统实战项目演练
						</h4>
						<div class="info">
							<span>高级</span> • <span>1125</span>人在学习
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./images/course01.png" alt="">
						<h4>
							Think PHP 5.0 博客系统实战项目演练
						</h4>
						<div class="info">
							<span>高级</span> • <span>1125</span>人在学习
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./images/course01.png" alt="">
						<h4>
							Think PHP 5.0 博客系统实战项目演练
						</h4>
						<div class="info">
							<span>高级</span> • <span>1125</span>人在学习
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./images/course01.png" alt="">
						<h4>
							Think PHP 5.0 博客系统实战项目演练
						</h4>
						<div class="info">
							<span>高级</span> • <span>1125</span>人在学习
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<script>
		// 1. 准备数据（对象数组）
		const data = [
			{
				src: 'images/course01.png',
				title: 'Think PHP 5.0 博客系统实战项目演练',
				num: 1125
			},
			{
				src: 'images/course02.png',
				title: 'Android 网络动态图片加载实战',
				num: 357
			},
			{
				src: 'images/course03.png',
				title: 'Angular2 大前端商城实战项目演练',
				num: 22250
			},
			{
				src: 'images/course04.png',
				title: 'Android APP 实战项目演练',
				num: 389
			},
			{
				src: 'images/course05.png',
				title: 'UGUI 源码深度分析案例',
				num: 124
			},
			{
				src: 'images/course06.png',
				title: 'Kami2首页界面切换效果实战演练',
				num: 432
			},
			{
				src: 'images/course07.png',
				title: 'UNITY 从入门到精通实战案例',
				num: 888
			},
			{
				src: 'images/course08.png',
				title: 'Cocos 深度学习你不会错过的实战',
				num: 590
			},
		]
	</script>

</body>

</html>